<template>
  <el-radio-group v-model="formValue.radio" class="ml-4">
    <div class="flex w-[100%] h-[32px]">
      <el-radio :label="0">使用固定价格申报</el-radio>
      <VGroup class="inline-flex" v-if="+formValue.radio === 0">
        <el-input-number
          v-model="formValue.price"
          :min="0"
          type="number"
          :controls="false"
          style="width: 120px"
          placeholder="请输入"
          @blur="handleCheckMin"
        >
        </el-input-number>
        <span
          class="flex items-center px-[12px] text-[14px] text-[var(--base-text-color)] bg-[var(--base-small-bg-color)] rounded-[0_4px_4px_0] border-[var(--base-border-color)] border-[1px]"
        >
          USD
        </span>
      </VGroup>
    </div>
    <div style="width: 100%">
      <el-radio :label="1">使用价格比例申报</el-radio>
      <div class="flex items-center" v-if="+formValue.radio === 1">
        <el-select filterable v-model="formValue.priceType" class="mr-[8px]">
          <el-option
            v-for="item in optionsData['price_type'] || []"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            {{ item.label }}
          </el-option>
        </el-select>
        <VGroup class="mr-[10px]">
          <el-input-number
            v-model="formValue.pricePercent"
            :min="0"
            :max="100"
            type="number"
            :controls="false"
            :precision="2"
            style="width: 90px"
          >
          </el-input-number>
          <span
            class="px-[12px] text-[14px] text-[var(--base-text-color)] bg-[var(--base-small-bg-color)] rounded-[0_4px_4px_0] border-[var(--base-border-color)] border-[1px]"
          >
            %
          </span>
        </VGroup>

        <el-checkbox v-model="formValue.hasMin" class="mr-[8px]">
          <div class="flex items-center">
            <span class="mr-[6px]">最低价格</span>
            <VGroup v-if="formValue.hasMin">
              <el-input-number
                v-model="formValue.minVal"
                :min="0"
                type="number"
                :controls="false"
                style="width: 90px"
                @blur="handleCheckMin"
                :precision="2"
              >
              </el-input-number>
              <span
                class="flex items-center px-[12px] text-[14px] text-[var(--base-text-color)] bg-[var(--base-small-bg-color)] rounded-[0_4px_4px_0] border-[var(--base-border-color)] border-[1px]"
              >
                USD
              </span>
            </VGroup>
          </div>
        </el-checkbox>
        <el-checkbox v-model="formValue.hasMax">
          <div class="flex items-center">
            <span class="mr-[6px]">最高价格</span>
            <VGroup v-if="formValue.hasMax">
              <el-input-number
                v-model="formValue.maxVal"
                :min="0"
                type="number"
                :controls="false"
                style="width: 90px"
                @blur="handleCheckMax"
                :precision="2"
              >
              </el-input-number>
              <span
                class="flex items-center px-[12px] text-[14px] text-[#333] bg-[#FAFAFA] rounded-[0_4px_4px_0] border-[#e6e7e9] border-[1px]"
              >
                USD
              </span>
            </VGroup>
          </div>
        </el-checkbox>
      </div>
    </div>
  </el-radio-group>
</template>

<script setup>
const props = defineProps({
  optionsData: { type: Object, default: () => ({}) },
  value: { type: Object, default: () => ({}) },
})

const emit = defineEmits(['input'])

const defaultVal = {
  radio: 0,
  price: undefined,
  priceType: null,
  hasMin: false,
  hasMax: false,
  minVal: null,
  maxVal: null,
  pricePercent: null,
}

const formValue = ref(JSON.parse(JSON.stringify(defaultVal)))

watch(
  () => props.value,
  val => {
    const {
      price_calc,
      price_type,
      fixed_price,
      min_price,
      max_price,
      price_percent,
    } = val || {}
    if (!Object.keys(val).length) {
      formValue.value = JSON.parse(JSON.stringify(defaultVal))
      return
    }
    if (price_calc === undefined) return
    formValue.value = {
      radio: price_calc,
      price: +fixed_price,
      priceType: price_type,
      minVal: min_price !== undefined ? +min_price : undefined,
      hasMin: min_price !== 0,
      maxVal: max_price !== undefined ? +max_price : undefined,
      hasMax: max_price !== 0,
      pricePercent: price_percent,
    }
  },
  { deep: true, immediate: true }
)

watch(
  () => formValue.value,
  val => {
    const {
      radio,
      price,
      priceType,
      hasMin,
      hasMax,
      minVal,
      maxVal,
      pricePercent,
    } = val || {}
    const isPercent = +radio === 1
    emit('input', {
      radio,
      price: !isPercent ? price : undefined,
      priceType: isPercent ? priceType : undefined,
      minVal: isPercent && hasMin ? minVal : undefined,
      maxVal: isPercent && hasMax ? maxVal : undefined,
      pricePercent: isPercent ? pricePercent : undefined,
      hasMin: isPercent ? hasMin : undefined,
      hasMax: isPercent ? hasMax : undefined,
    })
  },
  { deep: true, immediate: true }
)

const handleCheckMin = () => {
  const { minVal, maxVal } = formValue.value
  const val = minVal
  if (!val) return
  if (val > maxVal) {
    formValue.value = Object.assign({}, formValue.value, { maxVal: minVal })
  }
}

const handleCheckMax = () => {
  const { minVal, maxVal } = formValue.value
  const val = maxVal
  if (!val) return
  if (val < minVal) {
    formValue.value = Object.assign({}, formValue.value, { minVal: val })
  }
}
</script>
